<template>
  <div>
    <ul class="title-wrapper">
      <li
        v-for="(item, index) in titleArr"
        :class="value === index ? 'active' : ''"
        :key="item"
        @click="tabClick(index)"
      >
        {{ item }}
      </li>
    </ul>
    <slot></slot>
    {{ list[myActive] }}
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: ['value'],
  data() {
    return {
      titleArr: [],
    }
  },
  computed: {
    ...mapState(['list', 'myActive']),
  },
  created() {
    console.log(this.$slots.default, 'this')
    // 拿到标题渲染
    this.$slots.default.forEach((item) => {
      this.titleArr.push(item.data.attrs.title)
    })
  },
  methods: {
    tabClick(index) {
      this.$emit('input', index)
    },
  },
}
</script>

<style lang="scss">
.title-wrapper {
  display: flex;
  li {
    flex: 1;
  }
}
</style>
